<template>
  <div class="directory-container">
    <el-tree
      :data="treeData"
      node-key="id"
      default-expand-all
      :expand-on-click-node="false"
      :highlight-current="true"
      @node-click="handleNodeClick"
      :props="{ children: 'children', label: 'label' }"
    >
      <template #default="{ node, data }">
        <span class="node-content">
          <span class="chapter-order"> {{ data.chapter }}.{{ data.order }} </span>
          <span class="node-label">
            {{ node.label }}
          </span>
        </span>
      </template>
    </el-tree>
  </div>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue';

const props = defineProps({
  treeData: {
    type: Array,
    default: () => []
  }
});

const emit = defineEmits(['node-select']);

const handleNodeClick = (data, node) => {
  emit('node-select', {
    node,
    data,
    isLeaf: !node.expanded
  });
};
</script>

<style scoped>
.el-tree-node__expand-icon {
  display: none !important;
}
.node-content {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.chapter-order {
  font-weight: bold;
  color: #666;
  min-width: 50px;
  text-align: right;
}
.directory-container {
  width: 260px;
  padding: 15px;
  border-right: 1px solid #ebeef5;
}
.node-label {
  flex: 1;
  text-align: left;
  padding-left: 0;
}

.leaf-label {
  color: #606266;
}

:deep(.el-tree-node__content) {
  height: 40px;
  line-height: 40px;
}

:deep(.el-tree-node__expand-icon) {
  font-size: 16px;
  color: #c0c4cc;
}

:deep(.el-tree-node__expand-icon.is-leaf) {
  visibility: hidden;
}
.el-tree-node__children .el-tree-node__content {
  padding-left: 20px !important; /* 根据层级调整缩进量 */
}
</style>
